﻿@{
    ViewBag.Title = "Calendar";
}
<h1>List of calendar items2.</h1>
<div id="iframeContainer" style="border: black solid">
    <div id="iframeWrapper" data-iframe-container="yes" style="-webkit-overflow-scrolling:auto;overflow-y:auto;width:100%">
        <iframe srcdoc="@Html.Action("Items", "Calendar")" width="100%" frameborder="0"  id="iframe"></iframe>
    </div>
    <div style="height: 40px; text-align: center">
        <a href="javascript://true" id="btnMore">More</a>
    </div>
</div>

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function() {
            $(document).bind("touchmove", function(e) { e.preventDefault(); });
            $("#iframeContainer").bind("touchmove", function(e) { e.preventDefault(); });

            $("#btnMore").click(function() {
                var f = $("#iframeWrapper");
                f.scrollTop(f.scrollTop() + f.height() * 0.8);
            });
        }
        )
    </script>

}

